<template>
	<div class="app-container app-height">
      <div class="bg-white">
		<el-form label-width="75px" class="operation">
			<el-form-item label="表单名称:" class="float-left">
         <el-input v-model="queryParams.tableName"></el-input>
			</el-form-item>
         <el-form-item label="申请账号:" class="float-left">
				<el-select v-model="queryParams.groupId" placeholder="请选择申请账号">
               <el-option class="select-more-option"
					v-for="item in groupList"
					:key="item.groupId"
					:label="item.groupName"
					:value="item.groupId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="申请状态:" class="float-left">
				<el-select v-model="queryParams.status" placeholder="请选择申请状态" class="search-select-descen float-left">
					<el-option class="select-more-option"
					v-for="item in statusList"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
         <el-form-item class="search-btn float-left" >
            <el-button
               type="primary"
               icon="el-icon-search"
               size="mini"
               class="search-btn-item"
               @click="searchBtn"
            >查询</el-button>
            <el-button
               type="primary"
               icon="el-icon-refresh"
               class="search-btn-item"
               size="mini"
               @click="uploadBtn"
            >刷新</el-button>
         </el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="DataList" :max-height="mapHeight" border>
			<el-table-column label="申请表单" align="center" key="tableNames" prop="tableName" width="199"  :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<a href="javascript:;" style="color:#409eff;" @click="handleGoto(scope.row)">{{scope.row.tableNames}}</a>
				</template>
			</el-table-column>
			<el-table-column label="申请账号" align="center"  prop="userName"  :show-overflow-tooltip="true" />
			<el-table-column label="申请时间" align="center" key="createTime" prop="createTime" :show-overflow-tooltip="true" />
			<el-table-column label="审批时间" align="center" key="updateTime" prop="updateTime" />
			<el-table-column label="申请状态"  align="center" prop="status" width="199" >
            <template slot-scope="scope">
               {{scope.row.status=='0'?'驳回':scope.row.status=='1'?'通过':scope.row.status=='2'?'申请中':scope.row.status=='3'?'已撤销': ''}}
				</template>
         </el-table-column>
			<el-table-column label="审批人"  align="center" prop="approver" width="199" />
         <el-table-column label="备注"  align="center" prop="comment" width="199" />
			<el-table-column label="操作" align="center"  prop="concern" width="99">
			 	<template slot-scope="scope">
               <el-button  @click="handleRepeal(scope.row)" v-if="scope.row.status=='2'" size="mini">撤销</el-button>
				</template>
			</el-table-column>
		</el-table>
		 <pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getmyDataList"/>
      </div>
	</div>
</template>
<script>
import {getLogList,setLogcancel} from '@/api/dataManagement/system/apply';
import { groupUserList} from "@/api/dataManagement/system/group";
import {getHeight} from "@/utils/zkComm";
export default {
  name: "mapDetails",
  data(){
      return {
        // 遮罩层
        loading: false,
        // 用户表格数据
		  morehandleValue:'',
		  total:0,
		  mapHeight:undefined,
		  DataList:[{
					tableName:'测试table_log',
					tableAlias:'table_log',
					deptName:'数据仓库（CDM）>商保部门（SHB）',
					safeLevel:'1',
					totalRow:1234421,
					updateTime:'2021-2-17',
					concern:true,
					id:226,
					dirId:20
				},
				{
					tableName:'测试table_log',
					tableAlias:'table_log',
					deptName:'数据仓库（CDM）>商保部门（SHB）',
					safeLevel:'1',
					totalRow:1234421,
					updateTime:'2021-2-17',
					concern:false,
					id:226,
					dirId:20
				},
				],
		   // 查询参数
         queryParams: {
            pageNum: 1,
            pageSize: 30,
				tableName:undefined,
				groupId:'',
				status:undefined,
         },
			groupList:[],
         statusList:[
            {
               label:'驳回',
               value:'0'
            },
            {
               label:'通过',
               value:'1'
            },
            {
               label:'申请中',
               value:'2'
            },
            {
               label:'已撤销',
               value:'3'
            }
         ],
      }
  },
	created(){
		this.getlistGroup()
      this.getmyDataList()
	},
	mounted(){
		this.mapHeight = getHeight(true)
	},
	methods: {
		// 获取btale list
		getmyDataList(){
			this.loading = true;
			getLogList(this.queryParams).then(res=>{
				this.DataList = res.rows;
				this.total = res.total;
				this.loading =false;
			})
		},
      //获取分组
      getlistGroup(){
         groupUserList().then(res=>{
            this.groupList = res.data
				this.groupList.unshift({groupName:'本人',groupId:''})
         })
      },
      handleRepeal(row){
         setLogcancel({id:row.id}).then(res=>{
            if(res.code==200){
               this.$message({
                  message: '撤销成功',
                  type: 'success'
               })
					this.getmyDataList();
            }
         })
      },
		handleGoto(row){
			this.$router.push("/DMS/myData/logRecord/details?id="+row.id);
		},
      uploadBtn(){
         this.queryParams = {
            pageNum: 1,
            pageSize: 30,
				tableName:undefined,
				groupId:'',
				status:undefined,
         }
         this.getmyDataList();
      },
		searchBtn(){
			this.getmyDataList()
		},
	},
}
</script>

<style lang="scss" scoped>
/****
 reset element style
.

 */
 .el-col-3{
	 width:70px;
 }
 .el-col-2{
	 width:96px;
	 margin-right:10px;
 }
 /****
 reset element style
.

 */
 .app-container{
    padding:20px;
 }
 .operation {
	 height:43px;
	 line-height: 43px;
    margin-bottom:20px;
	 .search-select-parent{
		 width:320px;
	 }
	.concern{
		margin-left:10px;
	}
	.associa-select,.el-form-item{
		margin-right:10px;
	}
	.search-btn{
		margin-right:0px!important;
	}
 }
 .concern-icon{
	&:hover{
		cursor: pointer;
	}
 }
</style>